<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<div class="swiper"></div>
<body>
  <script>
    // xhr 对象向后端发送请求
    // 创建 xhr 对象
    const xhr = new XMLHttpRequest()
    // 建立请求链接 xhr.open(请求方式, 请求地址, 同步异步)
    // 同步：true  异步：false， 默认值是true
    xhr.open('get', 'http://zyxcl.xyz/music/api/banner', true)
    // 等待请求响应
    xhr.onreadystatechange = () => {
      // xhr.readyState 4: 请求完成
      if (xhr.readyState === 4) {
        // xhr.status 200 请求成功
        if (xhr.status === 200) {
          console.log('获取数据', xhr.responseText)
          const data = JSON.parse(xhr.responseText)
          console.log(data)
          const swiper = document.querySelector('.swiper')
          swiper.innerHTML = data.banners.map(item => {
            return `<img width="300" src="${item.imageUrl}" />`
          }).join('')
        } else {
          alert('请求失败:' + xhr.status)
        }
      }
    }
    // 发送请求
    xhr.send()


    console.log(111)



    // 状态码
    // 200: 成功
    // 404: 找不到访问的地址



  </script>
</body>
</html>
<!-- 
产品经理 PM：产出需求文档
视觉设计 UI：设计页面
交互设计 UE：页面交互逻辑
前端 FE：用户页面，展示用户数据，html、css、js
后端 RD：数据来源
测试 QA：测试功能
-->